<script setup lang="ts">
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { DndPanel, SelectionSelect, Menu, Snapshot } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'
import { onMounted, reactive, Ref, ref } from 'vue'
import Flow from '@/components/flow/index.vue'
import { ygdlcgz } from '@/views/gdgl/ajgd/flow'
import { by, ky } from '@/views/daly/jygl/dialogs/flow'
//使用左侧可拖动的节点
LogicFlow.use(DndPanel)
//使用选取工具
LogicFlow.use(SelectionSelect)
//使用右键菜单
LogicFlow.use(Menu)
//导出图片
LogicFlow.use(Snapshot)
/**logicflow实例 */
const lf: Ref<LogicFlow | undefined> = ref()
const flowRef = ref()
/**流程基础信息 */
const flowInfo = reactive({
  flowName: '',
  flowType: '',
})
/**xml的字符串 */
// const xmlStr = ref('')
onMounted(() => {
  //左侧工具栏
  lf.value?.extension.dndPanel.setPatternItems([
    {
      type: 'bpmn2:startEvent',
      text: '发起借阅申请',
      label: '开始节点',
      icon: '',
    },
    {
      type: 'bpmn2:lineEvent',
      text: '',
      label: '分割线',
      icon: '',
    },
    {
      type: 'bpmn2:textTask',
      text: 'text',
      label: '文本',
      icon: '',
    },
    {
      type: 'bpmn2:userTask',
      text: '用户任务',
      label: '用户任务',
      icon: '',
      className: 'important-node',
    },
    {
      type: 'bpmn2:serviceTask',
      text: '系统任务',
      label: '系统任务',
      icon: '',
      className: 'important-node',
    },
    {
      type: 'bpmn2:exclusiveGateway',
      text: '条件判断',
      label: '条件判断',
      icon: '',
    },
    {
      type: 'bpmn2:endEvent',
      text: '流程结束',
      label: '结束节点',
      icon: '',
    },
  ])
  setTimeout(() => {
    lf.value?.translateCenter()
  }, 10)
})
/**保存流程 */
function saveFlow() {
  const tempData = flowRef.value.exportXml()
  console.log(tempData)
}
</script>
<template>
  <el-button type="primary" @click="saveFlow">保存流程</el-button>
  <div class="flow-container mt-10px relative">
    <Flow
      ref="flowRef"
      grid
      @created="(value: LogicFlow) => lf = value"
      :json="ky.json"
      :flow-name="flowInfo.flowName"
      :flow-type="flowInfo.flowType"
    >
    </Flow>
  </div>
</template>
<style scoped lang="scss">
.flow-container {
  height: 100%;
  width: 100%;
}

.content-menu {
  height: 100%;
  right: 0px;
  top: 0px;
  background-color: white;
}
</style>
